<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

	<meta charset="utf-8">
	<title>webkit-box-orient demo</title>
	

<link rel="stylesheet" type="text/css" href="box-orient_1.css" media="all">
</head>
<body>

	<h1>-webkit-box-orient</h1>
	<dl id="control_panel" class="control_panel">
		<label><input name="align" value="horizontal" checked="checked" type="radio">horizontal</label>
		<label><input name="align" value="vertical" type="radio">vertical</label>
		<label><input name="align" value="inline-axis" type="radio">inline-axis</label>
		<label><input name="align" value="block-axis" type="radio">block-axis</label>
		<label><input name="align" value="inherit" type="radio">inherit</label>
	</dl>

	
	
	<div class="demo">
		<!-- demo start -->
		<div class="test">
			<div class="flex_3" style="background-color: rgb(161, 217, 66);">1</div>
			<div class="flex_2" style="background-color: rgb(216, 57, 12);">2</div>
			<div class="flex_w200" style="color: rgb(255, 255, 255); background-color: rgb(32, 84, 157);">testestestesttestestestesttestestestesttestestestest~</div>
		</div>
		<!-- demo end -->
	</div>
	
	<script type="text/javascript">
		var radio = document.querySelectorAll(".control_panel label input");
		var test = document.querySelector(".test");
		for(var i=0;i<radio.length;i++) {
			radio[i].onclick = (function(index) {
				return function(){
					if(radio[index].checked){
						test.style.cssText = "-webkit-box-orient:"+radio[index].value+";";
					}
				}
			})(i);
		}
	</script>


</body>
</html>
